<template>
  <div class="dataAnalysis">
      <div class="page_top">
          <div class="input_top">
              <span>{{formList3.text}}：</span>
              <a-select
                v-model="formList3.leval"
                mode="multiple"
                style="width: 75%"
                option-label-prop="label"
                >
                <a-select-option
                    v-for="(item, index) in formList3.options"
                    :key="item + index"
                    :value="item"
                    :label="item"
                    >>
                    {{ item }}
                </a-select-option>
                </a-select>
          </div>
          <div class="input_top">
            <span>{{ formList1.text }}：</span>
            <a-date-picker value-format="yyyy-MM-DD" v-model="formList1.date" style="width:75%"/>
          </div>
          <a-button style="margin:10px 25px 10px 20px">手动刷新</a-button>
          <a-checkbox style="margin:15px 0 10px 20px" @change="onChange" >
            实时刷新
        </a-checkbox>
        <span style="margin:15px 0 10px 0;color:red" v-if="refreshInTime">当前时间：{{times}} {{minute}}分{{second}}秒后刷新</span>
      </div>
      <div class="page_center">
          <!-- <i class="iconfont  icon-1301dizhi"></i> -->
          <div class="center_bg">
              <div class="center_left">
                  <div class="left_one" v-for="(item,index) in iconData" :key="index">
                      <i class="iconfont" :class="item.icon"></i>
                      <span>{{item.value}}</span>
                  </div>
              </div>
              <div class="center_center">
                <a-tabs default-active-key="1-1">
                    <a-tab-pane key="1-1" tab="视频">
                        <div class="videoPlay">
                            <p>当前暂无视频</p>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane key="2-1" tab="图片" force-render>
                        图片
                    </a-tab-pane>
                </a-tabs>
              </div>
              <div class="center_right">
                  <div class="right_one" v-for="(item,index) in 10" :key="index">
                      <p>12</p>
                      <span>当日累计人流量(人次)</span>
                  </div>
              </div>
          </div>
      </div>
      <div class="page_bottom">
          <a-tabs default-active-key="1-1">
                <a-tab-pane key="1-1" tab="人流量" force-render>
                    <div id="personalFlow" :style="{width: '100%', height: '360px'}"></div>
                </a-tab-pane>
                <a-tab-pane key="2-1" tab="温度" force-render>
                    <div id="temperature" ref="temperature" :style="{width: '100%', height: '360px'}"></div>
                </a-tab-pane>
                <a-tab-pane key="3-1" tab="湿度" force-render>
                    <div id="humidity" :style="{width: '100%', height: '360px'}"></div>
                </a-tab-pane>
            </a-tabs>
      </div>
  </div>
</template>

<script>
import iconData from '../../mock/iconData'
import debounce from '../../debounce'
export default {
    data() {
        return {
            times:'',//格式化之后的当前时间
            currentTime: new Date(), //当前时间
            refreshInTime:false,
            refreshTimer:null,
            minute:5,
            second:0,
            iconData,
            formList1: {
                text: "日期",
                date: '',
            },
            formList3: {
                text: "公司名称",
                leval: [],
                options: ["人流量传感器", "温度传感器", "湿度传感器"],
            },
        }
    },
    mounted() {
        this.drawLine()
        window.addEventListener('resize', this.resizeChart)
    },
    beforeUpdate(){
        
    },
    beforeDestroy() {
        if (this.times) {
            clearInterval(this.refreshTimer); 
        }
        window.removeEventListener('resize', this.resizeChart)
    },
    methods:{
        onChange(e) {
            let states = e.target.checked
            if(states){
                this.refreshInTime = true
                this.getTimes()
                return
            }
            this.refreshInTime = false
            this.minute = 5
            this.second = 0
            clearInterval(this.refreshTimer); 
        },
        getTimes(){
            this.refreshTimer = setInterval(this.getTimesInterval, 1000);
        },
        getTimesInterval:function() {
            console.log(11)
            let _this = this;
            let year = new Date().getFullYear(); //获取当前时间的年份
            let month = new Date().getMonth() + 1; //获取当前时间的月份
            let day = new Date().getDate(); //获取当前时间的天数
            let hours = new Date().getHours(); //获取当前时间的小时
            let minutes = new Date().getMinutes(); //获取当前时间的分数
            let seconds = new Date().getSeconds(); //获取当前时间的秒数
            //当小于 10 的是时候，在前面加 0
            if (hours < 10) {
            hours = "0" + hours;
            }
            if (minutes < 10) {
            minutes = "0" + minutes;
            }
            if (seconds < 10) {
            seconds = "0" + seconds;
            }
            //拼接格式化当前时间
            _this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
            this.countDown()
        },
        countDown(){
            if(this.minute==0){
                this.minute = 5
            }
            if(this.second==0){
                this.minute--
                this.second = 60
                this.second--
            }else{
                this.second--
            }
        },
        resizeChart: debounce(function() {
            this.personalFlow.resize() // this.myChart1是初始化的图标实例
            this.temperature.resize()
            this.humidity.resize()
        }, 400),
        drawLine(){
            this.personalFlow = this.$echarts.init(document.getElementById('personalFlow'))
            // 绘制图表
            this.personalFlow.setOption({
                title: {
                    left: 'center',
                    text: '人流量',
                },
                color:'#5685CC',
                xAxis: {
                    name: '时间',
                    type: 'category',
                    fontSize: 12,
                    data : ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','23:59',],
                },
                yAxis: {
                    name: '流量(m^3/s)',
                    type: 'value',
                },
                series: [{
                    name:'完成率',
                    type:'line',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    data:[12,123,1231,21,23,123,12,31,23,12,31,31,23,123,12,311,23,123,12,3123,13,12,312,312,11],
                    itemStyle: {        //上方显示数值
                        normal: {
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: '#2BB3D5',
                                    fontSize: 15
                                }
                            }
                        }
                    }
                },]
            });

            this.temperature = this.$echarts.init(this.$refs.temperature)
            // 绘制图表
            this.temperature.setOption({
                title: {
                    left: 'center',
                    text: '温度',
                },
                color:'#5685CC',
                xAxis: {
                    name: '时间',
                    type: 'category',
                    fontSize: 12,
                    data : ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','23:59',],
                },
                yAxis: {
                    name: '流量(m^3/s)',
                    type: 'value',
                },
                series: [{
                    name:'完成率',
                    type:'line',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    data:[12,123,1231,21,23,123,12,31,23,12,31,31,23,123,12,311,23,123,12,3123,13,12,312,312,11],
                    itemStyle: {        //上方显示数值
                        normal: {
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: '#2BB3D5',
                                    fontSize: 15
                                }
                            }
                        }
                    }
                },]
            });
            
            this.humidity = this.$echarts.init(document.getElementById('humidity'))
            // 绘制图表
            this.humidity.setOption({
                title: {
                    left: 'center',
                    text: '湿度',
                },
                color:'#5685CC',
                xAxis: {
                    name: '时间',
                    type: 'category',
                    fontSize: 12,
                    data : ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00','23:59',],
                },
                yAxis: {
                    name: '流量(m^3/s)',
                    type: 'value',
                },
                series: [{
                    name:'完成率',
                    type:'line',
                    stack: '总量',
                    areaStyle: {normal: {}},
                    data:[12,123,1231,21,23,123,12,31,23,12,31,31,23,123,12,311,23,123,12,3123,13,12,312,312,11],
                    itemStyle: {        //上方显示数值
                        normal: {
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: '#2BB3D5',
                                    fontSize: 15
                                }
                            }
                        }
                    }
                },]
            });

        }
    }
}
</script>

<style lang="less">
.dataAnalysis{
    .page_top{
        padding: 15px;
        display: flex;
        .input_top {
            width: 25%;
            margin: 10px 0 10px 0;
            span {
                width: 25%;
                display: inline-block;
                text-align: right;
            }
        }
    }
    .page_center{
        width: 100%;
        background: rgb(240, 242, 245);
        padding: 16px 0px;
        height: 320px;
        .center_bg{
            height: 100%;
            background-color: #030312;
            display: flex;
            justify-content: space-between;
            .center_left, .center_center{
                width: 25%;
                padding: 1%;
                border-right: 1px solid grey;
            }
            .center_left{
                .left_one{
                    width: 50%;
                    display: inline-block;
                    color: #f5f5f5;
                    margin-bottom: 25px;
                    i{
                        font-size: 16px;
                        margin-top: 10px;
                    }
                    span{
                        margin-left: 5px;
                    }
                }
                .left_one:nth-of-type(8){
                    color: #108ee9;
                }
                .left_one:nth-of-type(9){
                    color: skyblue;
                    i{
                        font-size: 19px;
                    }
                }
            }
            .center_center{
                .ant-tabs-nav .ant-tabs-tab{
                    color: gainsboro;
                }
                .ant-tabs-nav .ant-tabs-tab:hover, .ant-tabs-nav .ant-tabs-tab-active{
                    color: #40a9ff;
                }
                .videoPlay{
                    width: 100%;
                    height: 200px;
                    background: url('../../assets/img/bg_video.png') no-repeat;
                    background-size: 80% 80%;
                    background-position: center;
                    p{
                        color: white;
                        margin: 0;
                        width: 100%;
                        text-align: center;
                        padding-top: 138px;
                    }
                }
            }
            .center_right{
                width: 50%;
                padding: 1%;
                .right_one{
                    width: 20%;
                    display: inline-block;
                    margin: 20px 0 30px 0;
                    p{
                        color: orange;
                        font-size: 22px;
                        margin-bottom: 5px;
                        text-align: center;
                    }
                    span{
                        color: gainsboro;
                        font-size: 12px;
                    }
                }
            }
        }
    }
    .page_bottom{
        height: 400px;
    }
}
</style>